<script setup>
// 我们的机型顶部区域适配
const { safeAreaInsets } = uni.getSystemInfoSync();
import agriculturePannel from "./components/agriculturePannel.vue";
</script>

<template>
  <!-- 头部导航栏开始 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
     
      <!-- 左侧回退箭头 -->
      <navigator
        url="/pages/index/index"
        open-type="switchTab"
        hover-class="navigator-hover"
      >
        <view class="left_arrow"></view>
      </navigator>
      <view>
        <text class="agriculture">农业推荐</text>
      </view>
    </view>

    <!-- 搜索条 -->
    <view class="search">
      <input type="text" class="icon-search" placeholder="请输入内容" />
      <text class="icon-scan"> </text>
    </view>
  </view>
  <!-- 头部导航栏结束 -->

  <scroll-view scroll-y class="scroll-view">
    <!-- 组件复用 -->
    <agriculturePannel title="甜玉米">
      <view class="recommend_container">
        <!-- 上图片下文字 -->
        <view class="show_img">
          <image
            src="../../static/images/sweet_core3.webp"
            mode="scaleToFill"
          />
        </view>
        <!-- 文字描述 -->
        <view class="agriculture_desc">
          <view class="desc_item">
            <text class="descs">土壤质量：</text>
            <text class="desc"
              >湖北省土壤状况湖北省分布着棕红壤、黄棕壤和黄褐上三类地带性土壤.棕红壤主要分布在与湖南相邻的
              咸宁地区,属中亚热带北缘;黄棕壤</text
            >
          </view>
          <view class="desc_item">
            <text class="descs">气候条件：</text>
            <text class="desc"
              >湖北地处南北气候过渡带，属亚热带季风气候，四季分明，冬冷夏热，春暖秋爽，雨热同季，时空不均。</text
            >
          </view>
          <view class="desc_item">
            <text class="descs">描述：</text>
            <text class="desc">湖北省为最适宜种植玉米地区。</text>
          </view>
          <view class="desc_item">
            <text class="descs">特色：</text>
            <text class="desc"
              >甜玉米：甜玉米起源于美洲大陆，现代甜玉米是欧美等发达国家的主要蔬菜之一。甜玉米又可以分为普甜、加强甜、超甜玉米三类，超甜玉米含糖量最高，可溶性糖可达20%以上。</text
            >
          </view>
        </view>
      </view>
    </agriculturePannel>

    <!-- 组件复用 -->
    <agriculturePannel title="小番茄">
      <view class="recommend_container">
        <!-- 上图片下文字 -->
        <view class="show_img">
          <image src="../../static/images/tomoto.webp" mode="scaleToFill" />
        </view>
        <!-- 文字描述 -->
        <view class="agriculture_desc">
          <view class="desc_item">
            <text class="descs">土壤质量：</text>
            <text class="desc"
              >湖北省土壤状况湖北省分布着棕红壤、黄棕壤和黄褐上三类地带性土壤.棕红壤主要分布在与湖南相邻的
              咸宁地区,属中亚热带北缘;黄棕壤</text
            >
          </view>
          <view class="desc_item">
            <text class="descs">气候条件：</text>
            <text class="desc"
              >湖北地处南北气候过渡带，属亚热带季风气候，四季分明，冬冷夏热，春暖秋爽，雨热同季，时空不均。</text
            >
          </view>
          <view class="desc_item">
            <text class="descs">描述：</text>
            <text class="desc">湖北省为最适宜种植小番茄地区。。</text>
          </view>
          <view class="desc_item">
            <text class="descs">特色：</text>
            <text class="desc"
              >小番茄在生活当中也是比较常见的,而里面的营养价值也是比较高的,主要含有丰富的维生素c,也属于这些当中不可缺乏的营养物质。</text
            >
          </view>
        </view>
      </view>
    </agriculturePannel>

    <!-- 组件复用 -->
    <agriculturePannel title="哈密瓜">
      <view class="recommend_container">
        <!-- 上图片下文字 -->
        <view class="show_img">
          <image src="../../static/images/hmg1.webp" mode="scaleToFill" />
        </view>
        <!-- 文字描述 -->
        <view class="agriculture_desc">
          <view class="desc_item">
            <text class="descs">土壤质量：</text>
            <text class="desc"
              >湖北省土壤状况湖北省分布着棕红壤、黄棕壤和黄褐上三类地带性土壤.棕红壤主要分布在与湖南相邻的
              咸宁地区,属中亚热带北缘;黄棕壤</text
            >
          </view>
          <view class="desc_item">
            <text class="descs">气候条件：</text>
            <text class="desc"
              >湖北地处南北气候过渡带，属亚热带季风气候，四季分明，冬冷夏热，春暖秋爽，雨热同季，时空不均。</text
            >
          </view>
          <view class="desc_item">
            <text class="descs">描述：</text>
            <text class="desc">湖北省为最适宜种植哈密瓜地区。</text>
          </view>
          <view class="desc_item">
            <text class="descs">特色：</text>
            <text class="desc"
              >哈密瓜有100多个品种,形状有椭圆、卵圆、长棒形等多种;果皮有网纹、光皮两种;色泽分绿、黄、白等颜色,果肉有白、绿、橘红三种。</text
            >
          </view>
        </view>
      </view>
    </agriculturePannel>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f4f2f2;
  height: 10000rpx;
}

.scroll-view {
  position: absolute;
  top: 300rpx;
}
/* 自定义导航条开始 */
.navbar {
  position: fixed !important;
  top: 0 !important;
  z-index: 9999;
  width: 100%;
  background-color: #4dc58e;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  height: 200rpx;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    padding-top: 20rpx;
    .left_arrow {
      position: absolute;
      top: 120rpx;
      left: 30rpx;
      width: 35rpx;
      height: 35rpx;
      background: url("../../../src/static/images/left_arrow.png") no-repeat;
      background-size: cover;
    }
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      // flex: 1;
      line-height: 28rpx;
      color: #fff;
      font-family: "华文新魏";
      font-size: 50rpx;
    }
    .agriculture {
      margin-left: 260rpx;
      color: #fff;
      font-weight: bold;
    }
  }
  .search {
    position: relative;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search[placeholder] {
    position: relative;
    padding-left: 30rpx;
    font-size: 24rpx;
  }
  .icon-scan {
    position: absolute;
    top: 10rpx;
    left: 15rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: red;
    background: url("../../static//搜索.png") no-repeat;
    background-size: cover;
  }
}
// 自定义导航条结束

// 推荐农业的样式开始

.recommend_container {
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  width: 700rpx;
  // height: 900rpx;
  background-color: #fff;
  margin-left: 25rpx;
  margin-top: 20rpx;
  border-radius: 30rpx;
  overflow: hidden;
  .show_img {
    width: 650rpx;
    height: 500rpx;
    background-color: #bfa;
    border-radius: 60rpx;
    image {
      border-radius: 60rpx;
      width: 100%;
      height: 100%;
    }
  }
  .agriculture_desc {
    .desc_item {
      margin-bottom: 20rpx;
    }
    margin-top: 20rpx;
    .descs {
      font-size: 29rpx;
    }
    .desc {
      font-size: 25rpx;
      color: #adadad;
    }
  }
}

// 推荐农业的样式结束
</style>
